<template>
    <div class="image-finder">
        <div class='picture-item' v-for="(item,index) in imgs" :key="index">
            <div class="add-image" @click="imgClick(index)">
                <img :src="item.blob" v-show="item.status <1">
                <img :src="item.link" v-show="item.status ===1">

                <div class="upload-progress" v-show="item.status === 0">{{item.progress}}</div>
                <span class='del' @click.stop='deleteImg(index)' v-show="item.status !== 0">×</span>
            </div>
        </div>
        <div class='picture-item' v-show="imgs.length < count || count === 0">
            <div class="add-image" @click="addImageClick">
                <svg class="svg" aria-hidden="true">
                    <use xlink:href="#icon-add-image"></use>
                </svg>
            </div>
            <input type="file" ref="imageInput" v-show="false" v-if="count === 1" @change="addImage($event)">
            <input type="file" ref="imageInput" v-show="false" v-else multiple="multiple" @change="addImage($event)">
        </div>
        <svg style="position: absolute;width: 0px;height: 0px;overflow: hidden;">
            <symbol id="icon-add-image" viewBox="0 0 1024 1024">
                <path d="M573.61132813 908.65039063h-370.01953126c-73.65234375 0-133.59375-52.47070313-133.59374999-116.98242188v-469.3359375c0-64.51171875 59.94140625-116.98242188 133.59374999-116.98242188h50.36132813c5.00976563-11.25 12.04101563-30.41015625 16.69921875-43.06640624 5.71289063-15.55664063 11.51367188-31.55273438 16.96289063-43.9453125 5.88867188-13.53515625 15.8203125-36.03515625 38.58398437-36.03515625h383.203125c24.78515625 0 35.59570313 25.48828125 40.16601563 36.38671875 5.36132813 12.65625 10.546875 28.91601563 15.64453125 44.6484375 3.95507813 12.39257813 10.10742188 31.37695313 14.67773437 42.01171875h46.66992188c9.05273438-0.43945313 53.7890625-0.61523438 93.33984374 32.6953125 26.45507813 22.23632813 40.95703125 52.20703125 40.95703125 84.19921874v233.08593751c0 15.55664063-12.56835938 28.125-28.125 28.12499999s-28.125-12.56835938-28.125-28.125V322.33203125c0-15.20507813-7.47070313-29.79492188-21.00585937-41.22070313-25.22460938-21.26953125-54.140625-19.59960938-54.4921875-19.51171875l-0.96679688 0.08789063h-60.8203125c-24.78515625 0-35.59570313-25.48828125-40.16601562-36.38671875-5.36132813-12.65625-10.546875-28.91601563-15.64453125-44.6484375-3.95507813-12.39257813-10.10742188-31.37695313-14.67773438-42.01171875H340.17382812c-5.00976563 11.25-12.04101563 30.41015625-16.69921874 43.06640625-5.71289063 15.55664063-11.51367188 31.55273438-16.96289063 43.9453125-5.88867188 13.53515625-15.8203125 36.03515625-38.58398438 36.03515625h-64.33593749c-21.4453125 0-41.484375 6.94335938-56.33789063 19.51171875-13.53515625 11.42578125-21.00585938 26.015625-21.00585937 41.22070313v469.42382812c0 15.20507813 7.47070313 29.79492188 21.00585937 41.22070313 14.94140625 12.56835938 34.89257813 19.51171875 56.33789063 19.51171875h370.01953124c15.55664063 0 28.125 12.56835938 28.12500001 28.125s-12.56835938 27.94921875-28.125 27.94921875z"></path>
                <path d="M786.48242188 362.76171875h-91.40625001c-15.46875 0-28.125-12.65625-28.125-28.125s12.65625-28.125 28.125-28.125h91.40625c15.46875 0 28.125 12.65625 28.125 28.125s-12.65625 28.125-28.125 28.125zM507.4296875 737.96679688c-100.81054688 0-182.8125-82.00195313-182.8125-182.81250001s82.00195313-182.8125 182.8125-182.81249999 182.8125 82.00195313 182.8125 182.81249999-82.00195313 182.8125-182.8125 182.81250001z m0-309.28710938c-69.78515625 0-126.5625 56.77734375-126.5625 126.5625s56.77734375 126.5625 126.5625 126.5625 126.5625-56.77734375 126.5625-126.5625-56.77734375-126.5625-126.5625-126.5625zM927.01953125 832.80078125h-222.36328125c-15.46875 0-28.125-12.65625-28.125-28.125s12.65625-28.125 28.125-28.125h222.36328125c15.46875 0 28.125 12.65625 28.125 28.125s-12.65625 28.125-28.125 28.125z"></path>
                <path d="M843.96289063 693.49414063v222.36328124c0 15.46875-12.65625 28.125-28.12500001 28.12500001s-28.125-12.65625-28.125-28.125v-222.36328126c0-15.46875 12.65625-28.125 28.125-28.12499999s28.125 12.65625 28.125 28.125z"></path>
            </symbol>
        </svg>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";

    @Component({})
    //图片上传预览组件
    export default class ImageFinder extends Vue {
        //上传图片上限 0为不受限
        @Prop({default: 1, type: Number})
        private count!: number;
        // 上传图片状态 {hash:string;progress:number;[link:string]}
        @Prop({default: () => {return {};}, type: Object})
        private uploadStatus!: object;

        private imgs: { hash: string; blob: string; link: string, progress: string, status: number }[] = [];
        private uploadPictureList = [];

        @Watch("uploadStatus")
        private watchUploadStatus(newValue: object) {
            let imgs: any[] = [];
            if ((newValue as any) !== {}) {
                this.imgs.map((i) => {
                    if (i.hash === (<any> newValue).hash) {
                        i.progress = (<any> newValue).progress;
                        if ((<any> newValue).link) {
                            i.link = (<any> newValue).link;
                        }
                        if ((<any> newValue).status != undefined) {
                            i.status = (<any> newValue).status;
                        }
                    }
                    imgs.push(i);
                });
                this.imgs = imgs;
            }

        }

        private addImageClick(): any {
            (<any> this).$refs.imageInput.click();
        }

        private deleteImg(i: number): void {
            this.uploadPictureList.splice(i, 1);
            this.imgs.splice(i, 1);
            this.imgDel(i);
        }

        private addImage(e: any): void {
            (this.uploadPictureList as any[]) = [...this.uploadPictureList, ...e.target.files];
            let imgs = [];
            for (let i = 0; i < this.uploadPictureList.length; i++) {
                if ((<any> this).uploadPictureList[i].type.indexOf("image") >= 0) {
                    const img = window.URL.createObjectURL(this.uploadPictureList[i]);
                    imgs.push({hash: Math.random().toString(36).substr(2), blob: img, link: "", progress: 0, status: -1});

                }
                if (imgs.length >= this.count && this.count > 0) {
                    this.uploadPictureList.splice(this.count, this.uploadPictureList.length - 1);
                    break;
                }
            }
            (this.imgs as object[]) = imgs;
            this.$nextTick(() => {
                this.imgAdd(this.imgs, this.uploadPictureList);
            });
        }

        //删除图片后回调
        //@arg i:点击图片牵引
        @Emit("delImg")
        private imgDel(i: number): void {
        }

        //选择图片后回调
        //@arg imgs：图片blob或url数组；uploadPictureList：上传图片的file数组
        @Emit("addImg")
        private imgAdd(imgs: object[], uploadPictureList: File[]): void {
        }

        //点击图片回调
        //@arg i:点击图片牵引
        @Emit("clickImg")
        private imgClick(i: number): void {
        }

        // @vuese
        // 重制图片选择器
        public refresh(): void {
            this.imgs = [];
            this.uploadPictureList = [];
        }

    }
</script>

<style scoped lang="stylus">
    .image-finder
        width 100%;
        display flex;
        flex-wrap wrap;
        align-items flex-start;
        align-content flex-start;
        flex-direction row;
        justify-content start;

    .picture-item
        margin 5px;
        display block
        margin-left 0;
        position relative;
        width 75px;
        height 75px;

        .del
            position absolute;
            top 0;
            right 0;
            color #fff;
            border-radius 2px;
            width 17px;
            height 17px;
            line-height 15px;
            font-size 13px;
            z-index 2;
            text-align center;
            background-color #e54d42;
            opacity .7;

        img
            display block;
            max-width 75px;
            width auto;
            max-height 75px;
            height auto;

        .add-image
            width 75px;
            height 75px;
            color #ddd;
            font-size 72px;
            line-height 62%;
            text-align center;
            background-color #eee;
            cursor pointer;
            border-radius 5px;
            display flex;
            justify-content center;
            align-items center;

    .upload-progress
        font-size 12px;
        color #fff;
        width 75px;
        height 75px;
        text-align center;
        line-height 75px;
        position absolute;
        top 0;
        left 0;
        opacity 0.7;
        border-radius 4px;
        background-color #000;

    .svg
        width 36px;
        height 36px;
        vertical-align -2.5px;
        fill currentColor;
        overflow hidden;

</style>
